<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="900px" :before-close="handleClose">
      <el-row>
        <el-col :span="6">【题型】：{{qustionData.questionType|tx}}</el-col>
        <el-col :span="6">【编号】：{{qustionData.id}}</el-col>
        <el-col :span="6">【难度】：{{qustionData.difficulty|di}}</el-col>
        <el-col :span="6">【标签】：{{qustionData.tags}}</el-col>
        <el-col :span="6">【学科】：{{qustionData.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{qustionData.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{qustionData.direction}}</el-col>
      </el-row>
      <hr />【题干】：
      <div style="color:blue" v-html="qustionData.question"></div>
      <div>
        <div v-if="qustionData.questionType !== '3'">
          <div style="padding-bottom:5px">选项：（以下选中的选项为正确答案）</div>
          <div style="padding:8px 0" v-for="item in qustionData.options" :key="item.code">
            <el-radio
              v-if="qustionData.questionType === '1'"
              :value="item.isRight"
              :label="1"
            >{{item.title}}</el-radio>

            <el-checkbox
              v-if="qustionData.questionType === '2'"
              :value="item.isRight === 1?true:false"
            >{{item.title}}</el-checkbox>
          </div>
        </div>
        <hr />【参考答案】：
        <el-button type="danger" plain @click="videolook">视频答案预览</el-button>
        <div class="video" v-if="play">
          <video :src="qustionData.videoURL" ref="video" controls width="400" height="400"></video>
        </div>
        <hr />
        【答案解析】：{{qustionData.videoURL}}
        <hr />
        【题目备注】：{{qustionData.videoURL}}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;play = false">关闭</el-button>
      </span>''''
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '../../../api/hmmm/constants'
import { detail } from '../../../api/hmmm/questions'
export default {
  name: '',
  props: {},
  components: {},
  data () {
    return {
      qustionId: 0,
      dialogVisible: false,
      qustionData: {},
      play: false
    }
  },
  filters: {
    tx (value) {
      if (value) return questionType.find(item => item.value === +value).label + '题'
    },
    di (value) {
      if (value) return difficulty.find(item => item.value === +value).label
    }
  },
  computed: {},
  watch: {

  },
  created () {},
  mounted () {},
  methods: {
    handleClose (done) {
      done()
    },
    async getdetailList (id) {
      const { data } = await detail({
        id: id
      })
      this.qustionData = data
    },
    fn (row, column, cellValue, index) {
      if (cellValue === '1') {
        return '单选'
      } else if (cellValue === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    videolook () {
      this.play = true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
